<template>
  <div class="home">
    <div class="mask" v-show="isShow"></div>
    <div class="add_content" @click="isShow = !isShow">
      <img
        class="label_1"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/psk0bemcr0xtsah012az369mff56u14pxr5703717eb-90e3-4ce0-a283-9c64056a413d"
      />
      <div class="content" v-show="isShow">
        <router-link :to="{ name: 'toAsk' }"
          ><van-icon name="question" />去提问</router-link
        >
        <router-link :to="{ name: 'keepDiary' }"
          ><van-icon name="column" />写日记</router-link
        >
        <router-link :to="{ name: 'Cart' }"
          ><van-icon name="cart" />购物车</router-link
        >
      </div>
    </div>
    <div class="group_25 flex-row">
      <router-link :to="{ name: 'searchCity' }" class="text_1"
        >郑州</router-link
      >
      <div class="box_2 flex-col"></div>
      <div
        @click="$router.push({ name: 'searchProject' })"
        class="box_3 flex-row justify-end"
      >
        <div class="box_4 flex-col">
          <div class="group_2 flex-col"></div>
        </div>
        <div class="text-wrapper_1 flex-col">
          <span class="text_2">搜索</span>
        </div>
      </div>
      <span class="text_3">双眼皮</span>
    </div>
    <div class="page flex-col">
      <div class="box_1 flex-col">
        <div class="group_24 flex-col">
          <div class="group_26 flex-row">
            <div class="image-text_17 flex-col justify-between">
              <img
                class="image_2"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/pst0ufr0ojztt7gvte8w3zp5g20enu4k9m5c2957d9e-8a80-46f5-be35-26a94521ed91"
              />
              <router-link :to="{ name: 'facialProfile' }" class="text-group_1"
                >面部轮廓</router-link
              >
            </div>
            <div class="image-text_18 flex-col justify-between">
              <img
                class="image_3"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvdkh4vby3pz7mjas3vggky0zatx3oald55e9dc0-ad20-4dc5-b114-64b1db6a83d2"
              />
              <span class="text-group_2">瘦脸针</span>
            </div>
            <div class="image-text_19 flex-col justify-between">
              <img
                class="image_4"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4kiux0vhxrrzxksc7q657f9e18fhqyf838e29d32-682e-4f7c-892c-487b61e8f891"
              />
              <span class="text-group_3">眼部</span>
            </div>
            <div class="image-text_20 flex-col justify-between">
              <img
                class="image_5"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4yox4ejbtjte47kyzrnsa9009gc3wwnvkni7079bb84-b52f-4483-84d3-7cc091c2302b"
              />
              <span class="text-group_4">鼻部</span>
            </div>
            <div class="image-text_21 flex-col justify-between">
              <img
                class="image_6"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskrjdpha3mheuq3ign0lrlarsvipj24kb75f2c5721-90aa-48a6-b13c-0e8ec5dc04f5"
              />
              <span class="text-group_5">胸部</span>
            </div>
          </div>
          <div class="group_27 flex-row">
            <div class="image-text_22 flex-col justify-between">
              <img
                class="image_7"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psdi02app806dqgdeun5vl2r0m3wvv18cvs616cbbb8-4144-48bd-b70b-b10254533d39"
              />
              <span class="text-group_6">皮肤美容</span>
            </div>
            <div class="image-text_23 flex-col justify-between">
              <img
                class="image_8"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psii6kix1m6jxopkrjhpm3txrnu25k4fof6a341ef-5477-47bf-9213-f3c4f589fe41"
              />
              <span class="text-group_7">玻尿酸</span>
            </div>
            <div class="image-text_24 flex-col justify-between">
              <img
                class="image_9"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psx8nhd6kc2sutv33i3582kt4ada78ml199222b7f-f700-443e-8742-446b57380afd"
              />
              <span class="text-group_8">美体塑形</span>
            </div>
            <div class="image-text_25 flex-col justify-between">
              <img
                class="image_10"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/pso0zgpq91t5rmp72o23vxnn6x6pp3i424276269c1-52b1-4c2b-bce7-0db8134359eb"
              />
              <span class="text-group_9">自体脂肪</span>
            </div>
            <div class="image-text_26 flex-col justify-between">
              <img
                class="image_11"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/pshrng6mv732mxp8sied3oqowto06iwrpj8138ed2f-da48-45c8-92a3-4530dc4d2088"
              />
              <span class="text-group_10">除皱抗衰</span>
            </div>
          </div>
          <img
            class="image_12"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pseeun3owox8a0ztmf4lypxrb0m2cxmpx4mjh9ad9635d-5421-463a-af5d-30c40af71bf4"
          />
          <div class="group_28 flex-row justify-between">
            <div class="group_6 flex-col justify-end">
              <router-link
                :to="{ name: 'redPacket' }"
                class="text-group_23 flex-col justify-between"
              >
                <span class="text_4">天天红包</span>
                <span class="text_5">百亿补贴</span>
              </router-link>
              <div class="text-wrapper_2 flex-col">
                <span class="text_6">¥</span>
              </div>
            </div>
            <div class="group_7 flex-col justify-end">
              <router-link
                :to="{ name: 'yanjiuyuan' }"
                class="text-group_24 flex-col justify-between"
              >
                <span class="text_7">颜究院</span>
                <span class="text_8">医美社区</span>
              </router-link>
              <div class="section_2 flex-col">
                <div class="group_8 flex-col"></div>
                <div class="group_9 flex-col"></div>
              </div>
            </div>
            <div class="group_10 flex-col">
              <router-link
                :to="{ name: 'doctorHospital' }"
                class="text-group_25 flex-col justify-between"
              >
                <span class="text_9">医院医生</span>
                <span class="text_10">榜单甄选</span>
              </router-link>
              <div class="section_3 flex-col">
                <div class="section_4 flex-col"></div>
              </div>
            </div>
            <div class="group_11 flex-col justify-end">
              <router-link
                :to="{ name: 'medicalBeauty' }"
                class="text-group_26 flex-col justify-between"
              >
                <span class="text_11">医美百科</span>
                <span class="text_12">医美科普</span>
              </router-link>
              <img
                class="label_2"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psha4sk3q8ecvh1ghmbauxgi28wegw2tzpiadb4f510-bf87-4548-9673-672011754304"
              />
            </div>
            <div class="group_12 flex-col justify-end">
              <router-link
                :to="{ name: 'newPeople' }"
                class="text-group_27 flex-col justify-between"
              >
                <span class="text_13">新人专享</span>
                <span class="text_14">首单0元</span>
              </router-link>
              <div class="section_5 flex-col"></div>
            </div>
            <div class="group_13 flex-col justify-end">
              <router-link
                :to="{ name: 'projectHiring' }"
                class="text-group_28 flex-col justify-between"
              >
                <span class="text_15">免费招募</span>
                <span class="text_16">限时体验</span>
              </router-link>
              <div class="box_5 flex-col"></div>
            </div>
          </div>
          <div class="text-wrapper_6 flex-row">
            <span class="text_17">推荐</span> <span class="text_18">关注</span>
            <span class="text_19">视频</span>
            <span class="text_20">皮肤美容</span>
            <span class="text_21">眼部整形</span>
            <span class="text_22">除皱抗</span>
          </div>
          <div class="group_14 flex-col"></div>
          <div class="group_15 flex-col">
            <span class="text_23">7月清凉夏日购</span>
            <div class="group_16 flex-col">
              <div class="text-wrapper_4">
                <span class="text_24">盛夏</span>
                <span class="text_25">也要美</span>
              </div>
              <div class="box_6 flex-row">
                <div class="image-text_27 flex-row justify-between">
                  <span class="text-group_17">立即抢购</span>
                  <div class="section_6 flex-col"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="group_29 flex-row justify-between">
            <div class="box_7 flex-col"></div>
            <div class="box_15 flex-col justify-between">
              <div class="section_7 flex-col"></div>
              <div class="section_8 flex-col"></div>
            </div>
          </div>
          <div class="group_21 flex-col">
            <span class="text_26">盛夏变美红包</span>
            <div class="block_1 flex-col">
              <div class="text-wrapper_5">
                <span class="text_27">¥10718</span>
                <span class="text_28">超值红包</span>
              </div>
              <div class="group_22 flex-row">
                <div class="image-text_32 flex-row justify-between">
                  <span class="text-group_22">立即领取</span>
                  <div class="group_23 flex-col"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      constants: {},
      isShow: false,
    };
  },
  methods: {},
};
</script>
<style src="./homes/homeStyle/indexhome.css" scoped></style>
<style src="./homes/homeStyle/common.css" scoped></style>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .page {
    flex: 1;
    overflow-y: auto;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.33);
    z-index: 3;
  }
}
.add_content {
  position: absolute;
  top: 17px;
  right: 20px;
  z-index: 2222;
  .content {
    font-size: 16px;
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    box-shadow: 0.001rem 0.001rem 10px rgb(211, 211, 211);
    position: absolute;
    left: -130px;
    top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    a {
      i {
        margin-right: 0.1rem;
        color: #de868f;
      }
    }
  }
}
</style>
